<template>
  <view class="payment-code-page" :style="{ paddingTop: statusBarHeight + 'px' }">
    <!-- 导航栏 -->
	<NavTitle titleKey="commonTitle.收款码" />
    <!-- 收款二维码区域 -->
    <view class="qrcode-container">
      <view class="qrcode-card">
        <!-- 用户信息 -->
        <view class="user-info">
          <image class="avatar" :src="$wanlshop.oss(user.avatar, 80, 80, 2, 'avatar')" mode="aspectFill"></image>
          <view class="user-details">
            <text class="name">{{ user.nickname || $t('pages.user.paymentQrCode.未命名') }}</text>
            <text class="amount">{{$t('pages.user.paymentQrCode.余额')}} {{ user.money || '0.00' }}</text>
          </view>
        </view>

        <!-- 二维码 -->
        <view class="qrcode-wrapper">
           <!-- 动态加载后端返回的二维码图片 -->
           <image 
             v-if="qrCodeUrl" 
             :src="qrCodeUrl" 
             mode="widthFix" 
             :style="{ width: qrSize + 'px', height: qrSize + 'px' }"
           />
           <view v-else class="loading-text">{{$t('pages.user.paymentQrCode.加载中')}}</view>
         </view>

        <!-- 提示信息 -->
        <view class="tips">
          <text>{{$t('pages.user.paymentQrCode.扫一扫上面的二维码')}}</text>
        </view>
      </view>
    </view>

    <!-- 付款方式选择 -->
   <!-- <view class="payment-methods">
      <view class="section-title">{{$t('pages.user.paymentCode.paymentTitle')}}</view>
      <view class="method-list">
        <view 
          v-for="(method, index) in paymentMethods" 
          :key="index" 
          class="method-item"
          :class="{ active: selectedMethod === method.value }"
          @tap="selectPaymentMethod(method.value)"
        >
          <view class="method-icon">
            <text :class="method.icon"></text>
          </view>
          <view class="method-info">
            <text class="method-name">{{ method.name }}</text>
            <text class="method-desc">{{ method.desc }}</text>
          </view>
          <view class="method-check">
            <text class="wlIcon-xuanzhong" v-if="selectedMethod === method.value"></text>
          </view>
        </view>
      </view>
    </view> -->

    <!-- 保存二维码按钮 -->
    <view class="save-btn-container">
      <button class="save-btn" @tap="saveQrcode">{{$t('pages.user.paymentQrCode.保存收款码')}}</button>
    </view>
  </view>
</template>

<script>
import UQRCode from 'uqrcodejs'; // 引入UQRCode插件[7](@ref)

export default {
  data() {
    return {
      statusBarHeight: 0,
      navHeight: 0,
      qrSize: 300, // 二维码尺寸
      qrCodeUrl: '', // 接收后端返回的二维码图片URL
      paymentMethods: [
        { 
          name: this.$t('pages.user.paymentQrCode.会员支付'), 
          desc: this.$t('pages.user.paymentQrCode.使用会员余额支付'),
          icon: 'wlIcon-huiyuan',
          value: 'member'
        },
        { 
          name: this.$t('pages.user.paymentQrCode.银行卡支付'), 
          desc: this.$t('pages.user.paymentQrCode.绑定银行卡支付'),
          icon: 'wlIcon-yinhangka',
          value: 'bank'
        }
      ],
      selectedMethod: 'member', // 默认选中会员支付
      qrContent: '' // 二维码内容
    };
  },
  computed: {
    user() {
      return this.$store.state.user;
    }
  },
  onLoad() {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    this.navHeight = systemInfo.statusBarHeight + 44;
    this.fetchQRCode(); // 页面加载时请求二维码
    // 生成二维码内容（实际应用中应从后端获取）
    this.generateQrContent();
  },
  onReady() {
    // 页面渲染完成后生成二维码
    this.$nextTick(() => {
      this.generateQrcode();
    });
  },
  
  mounted() {
      this.fetchQRCode(); // 页面加载时请求二维码
    },
    watch: {
      // 支付方式变化时重新生成二维码
      selectedMethod() {
        this.fetchQRCode();
      }
    },
  
  methods: {
   
   
   // 请求后端二维码接口
       async fetchQRCode() {
		   await uni.request({
		   	url: '/wanlshop/pay/qrcode',
		   	success: res => {
		   		this.qrCodeUrl = this.$wanlshop.oss(res.data.path, 500, 0); // 接收图片URL
			
		   	}
		   });
       },
   
    // 选择支付方式
    selectPaymentMethod(method) {
      this.selectedMethod = method;
      // 实际应用中这里可以触发支付方式变更的逻辑
    },
    
    // 保存二维码到相册
    saveQrcode() {
      if (!this.qrCodeUrl) {
        uni.showToast({
          title: this.$t('pages.user.paymentQrCode.请先生成二维码'),
          icon: 'none'
        });
        return;
      }
      
      uni.saveImageToPhotosAlbum({
        filePath: this.qrCodeUrl,
        success: () => {
          uni.showToast({
            title: this.$t('pages.user.paymentQrCode.保存成功')
          });
        },
        fail: (err) => {
          console.error('保存失败:', err);
          if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
            this.showAuthSetting();
          } else {
            uni.showToast({
              title: this.$t('pages.user.paymentQrCode.保存失败'),
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 显示授权设置
    showAuthSetting() {
      uni.showModal({
        title: this.$t('pages.user.paymentQrCode.权限申请'),
        content: this.$t('pages.user.paymentQrCode.需要相册权限才能保存图片'),
        confirmText: this.$t('pages.user.paymentQrCode.去设置'),
        success: (res) => {
          if (res.confirm) {
            uni.openSetting({
              success: (settingRes) => {
                console.log('设置结果:', settingRes);
              }
            });
          }
        }
      });
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss">
.payment-code-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
  
  .cu-bar {
    border-bottom: 1rpx solid #eee;
    .action {
      padding: 0 30rpx;
      .wlIcon-fanhui {
        font-size: 40rpx;
      }
    }
    .content {
      font-size: 36rpx;
    }
  }
  
  .qrcode-container {
    padding: 40rpx;
    .qrcode-card {
      background-color: #fff;
      border-radius: 20rpx;
      padding: 40rpx;
      box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
      
      .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 40rpx;
        
        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
        
        .user-details {
          display: flex;
          flex-direction: column;
          
          .name {
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 8rpx;
          }
          
          .amount {
            font-size: 28rpx;
            color: #666;
          }
        }
      }
      
      .qrcode-wrapper {
        display: flex;
        justify-content: center;
        margin: 30rpx 0;
        
        .qrcode-canvas {
          border: 10rpx solid #fff;
          box-shadow: 0 0 20rpx rgba(0,0,0,0.1);
        }
      }
      
      .tips {
        text-align: center;
        color: #999;
        font-size: 26rpx;
        margin-top: 30rpx;
      }
    }
  }
  
  .payment-methods {
    background-color: #fff;
    border-radius: 20rpx;
    margin: 30rpx;
    padding: 0 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #eee;
    }
    
    .method-list {
      .method-item {
        display: flex;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #f5f5f5;
        
        &.active {
          .method-name {
            color: #007AFF;
          }
        }
        
        .method-icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          background-color: #f5f5f5;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
          
          text {
            font-size: 44rpx;
            color: #007AFF;
          }
        }
        
        .method-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          
          .method-name {
            font-size: 32rpx;
            font-weight: 500;
            margin-bottom: 8rpx;
          }
          
          .method-desc {
            font-size: 26rpx;
            color: #999;
          }
        }
        
        .method-check {
          width: 60rpx;
          text-align: center;
          
          .wlIcon-xuanzhong {
            font-size: 40rpx;
            color: #007AFF;
          }
        }
        
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
  
  .save-btn-container {
    padding: 40rpx 30rpx 0;
    
    .save-btn {
      background-color: #007AFF;
      color: #fff;
      height: 90rpx;
      line-height: 90rpx;
      border-radius: 45rpx;
      font-size: 32rpx;
      box-shadow: 0 4rpx 12rpx rgba(0,122,255,0.3);
      
      &:active {
        opacity: 0.9;
      }
    }
  }
}
</style>